import { BasicColumn, FormSchema } from '/@/components/Table';

import gloabComponentConfig from '/@/settings/gloabComponentConfig';
import {
  handleUpdateSchema,
  MenuIsButtonOptions,
  menuTypeOptions,
} from '/@/views/system/senior/menu/page.data';
import {
  userStatusFormItem,
  userStatusFormItemSelect,
  userSwitchFormItem,
} from '@/settings/ShareFormItem';
import { includes, isNil } from 'lodash-es';
import { apiGetMenusDropdown } from '@/api/http/system/senior/menus/menus.api';

export const useMenusAddSchemaForm = (): FormSchema[] => {
  return [
    {
      field: 'parentId',
      label: '父菜单',
      component: 'ApiTreeSelect',
      componentProps: {
        api: apiGetMenusDropdown,
        labelField: 'label',
        valueField: 'menuId',
        placeholder: '请选择父菜单（不选则为根目录菜单）',
      },
      colProps: gloabComponentConfig.responseColProps.fullspan,
    },
    {
      field: 'isButton',
      label: '类型',
      component: 'RadioButtonGroup',
      defaultValue: '0',
      componentProps: ({ formActionType }) => {
        return {
          options: MenuIsButtonOptions,
          onChange: (e) => {
            if (!isNil(formActionType)) {
              const typeName = e == '1' ? '按钮' : '菜单';
              formActionType?.updateSchema([
                { field: 'meta.icon', label: typeName + '图标' },
                {
                  field: 'menuName',
                  label: typeName + '名称',
                  componentProps: { placeholder: `请输入${typeName}名称` },
                },
              ]);
            }
          },
        };
      },
      colProps: gloabComponentConfig.responseColProps.fullspan,
    },

    {
      field: 'menuType',
      label: '菜单类型',
      component: 'RadioGroup',
      defaultValue: '1',
      componentProps: ({ formActionType }) => {
        return {
          options: menuTypeOptions,
          onChange: (e) => {
            if (typeof e == 'object') {
              handleUpdateSchema(formActionType, e.target.value);
            }
          },
        };
      },

      colProps: gloabComponentConfig.responseColProps.fullspan,
      ifShow: ({ model }) => model['isButton'] == '0',
    },
    { field: 'icon', label: '菜单图标', component: 'IconPicker' },
    {
      field: 'menuName',
      label: '菜单名称',
      component: 'Input',
      componentProps: { placeholder: `请输入菜单名称` },
    },
    { field: 'permission', label: '权限标识', component: 'Input' },
    {
      field: 'redirect',
      label: '默认跳转地址',
      labelWidth: 110,
      component: 'Input',
      ifShow: ({ model }) => model['isButton'] == '0' && includes(['2'], model['menuType']),
    },
    {
      field: 'path',
      label: '页面URL',
      component: 'Input',
      componentProps: {
        placeholder: '请输入前端项目地址栏地址',
      },
      ifShow: ({ model }) => model['isButton'] == '0' && includes(['1', '2'], model['menuType']),
    },
    {
      field: 'routerName',
      label: '组件名',
      component: 'Input',
      componentProps: {
        placeholder: '请输入组件定义的name，defineOptions中的name',
      },

      ifShow: ({ model }) => model['isButton'] == '0' && !includes(['3', '2'], model['menuType']),
    },
    {
      field: 'frameSrc',
      label: '网站地址',
      component: 'Input',
      componentProps: {
        placeholder: '请输入外部网站地址或者内部网站相对地址',
      },
      colProps: gloabComponentConfig.responseColProps.fullspan,
      ifShow: ({ model }) => model['isButton'] == '0' && model['menuType'] == '3',
    },
    {
      field: 'component',
      label: '页面路径',
      component: 'Input',
      componentProps: {
        placeholder: '请输入前端项目views文件内的页面路径',
      },
      ifShow: ({ model }) => model['isButton'] == '0' && model['menuType'] == '1',
    },
    userSwitchFormItem({
      field: 'hideTab',
      label: '是否隐藏标签页',
      labelWidth: 110,
      ifShow: ({ model }) => model['isButton'] == '0' && model['menuType'] == '1',
    }),
    userSwitchFormItem({
      field: 'hideMenu',
      label: '是否隐藏菜单',
      labelWidth: 110,
      ifShow: ({ model }) => model['isButton'] == '0' && model['menuType'] == '1',
    }),
    userSwitchFormItem({
      field: 'ignoreKeepAlive',
      label: '是否缓存',
      ifShow: ({ model }) => model['isButton'] == '0' && model['menuType'] == '1',
    }),

    userStatusFormItem(),
    {
      field: 'orderNo',
      label: '排序值',
      component: 'InputNumber',
      defaultValue: 0,
    },
  ];
};

export const useMenusQueryColumns = (): BasicColumn[] => {
  return [
    // { title: '菜单ID', dataIndex: 'id' },
    // { title: '菜单父ID', dataIndex: 'parentId' },
    { title: '菜单名称', dataIndex: 'menuName', width: 300, align: 'left' },
    { title: '组件名', dataIndex: 'routerName' },
    { title: '路由URl路径', dataIndex: 'path' },
    { title: '排序值', dataIndex: 'orderNo' },
    { title: '菜单类型', dataIndex: 'menuType' },
    { title: '菜单类型名称', dataIndex: 'menuTypeStr' },
    { title: '类型', dataIndex: 'isButton' },
    { title: '状态', dataIndex: 'status' },
    { title: '状态名称', dataIndex: 'statusStr' },
    { title: '创建名称', dataIndex: 'createTime' },
    { title: '图标', dataIndex: 'icon' },
    { title: '路由地址', dataIndex: 'component' },
  ];
};

export const useMenusQuerySearchForm = (): FormSchema[] => {
  return [{ field: 'menuName', label: '菜单名称', component: 'Input' }, userStatusFormItemSelect()];
};
